.modal-select-friend {
	.ant-modal-body {
		padding: 0;
	}
	.select-friend-container {
		height: 500px;
		display: flex;
		align-items: stretch;
		.select-friend-left {
			width: 300px;
			box-sizing: border-box;
			border-right: 1px solid #d9d9d9;
			.name {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 5px 10px;
				height: 42px;
				.text {
					width: 80px;
					margin-right: 5px;
				}
			}
			.left-item {
				display: flex;
				box-sizing: border-box;
				padding: 5px 10px;
				align-items: center;
				&.header {
					background: #ccc;
					padding: 7px 10px;
				}
				&:hover {
					background: #d9d9d9;
				}
				.header {
					width: 50px;
					text-align: center;
					img {
						width: 40px;
						height: 40px;
					}
				}
				.nickname {
					min-width: 0;
					flex: 1;
					text-align: center;
				}
				.ctrl {
					width: 60px;
					text-align: center;
					.icon {
						font-size: 16px;
						cursor: pointer;
						margin: 0 5px;
						color: red;
					}
				}
			}
		}
		.select-friend-right {
			flex: 1 0 700px;
			position: relative;
			padding-top: 0 !important;
			.list-header {
				display: flex;
				align-items: center;
				padding: 5px 10px;
				box-sizing: border-box;
			}
			.list-footer {
				padding: 5px 10px;
			}
			.input {
				width: 150px;
				margin-right: 10px;
			}
			.list-center {
				top: 42px;
			}
			.icon {
				font-size: 20px;
				transition: all 0.3s ease-in-out;
				cursor: pointer;
				&.act {
					transform: rotate(180deg);
					color: rgb(2, 204, 2);
				}
			}
		}
	}
	.inner-person {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		border: 1px solid rgb(1, 226, 1);
		color: rgb(1, 226, 1);
		font-size: 10px !important;
		display: inline-block;
		text-align: center;
		line-height: 16px;
	}
}
